<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="demo.css">
    <script src="js/rem.js"></script>
    <style>

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            list-style: none;
        }

        body, html {
            height: 100%;
            width: 100%;
            min-width: 1000px;
            overflow: hidden;
        }

        body {
            background: url("images/bg.jpg") no-repeat center;
            background-size: 100% 100%;;
        }

        /* div {
             border: 1px solid red;
         }*/

        .header {
            height: 10%;
            position: relative;
            font-size: 10px
        }

        .header > div {
            width: inherit;
            font-size: 0.05rem;
        }

        .header-left {
            position: absolute;
            left: 12%;
            top: 40%;
        }

        .warp {
            height: 100%;
        }

        .header-right {
            position: absolute;
            right: 1%;
            top: 29%;
        }

        .body {
            height: 60%;
            color: #FFF;

        }

        .body-ambo {
            width: 22%;
            height: 100%;
        }

        .body > div {
            float: left;
        }

        .body-center {
            width: 56%;
            height: 100%;
        }

        .footer {
            height: 30%;
        }

        .footer-child {
            float: left;
            width: 50%;
            height: 100%;
        }

        .body-ambo-s {
            height: 40%;
            position: relative;
        }

        .body-ambo-b {
            height: 60%;
            position: relative;
            overflow: hidden;
        }

        .body-center {
            background: url('images/map.jpg') no-repeat center;
            background-size: contain;
        }

        .visitor {
            height: 50%;
            font-size: 0.1rem;
            padding-top: 0.2rem;
            color: #FFF;
            text-indent: 0.11rem;
            position: relative;
        }

        .visitor > p {
            width: inherit;
            position: absolute;
            top: 50%;
            left: 1%;
        }

        .visitor-staff {
            height: 50%;
            font-size: 0.08rem;
            font-family: "Quartz";
            color: rgb(3, 208, 133);
            position: relative;
        }

        .visitor-staff > div {
            margin-top: 10%;
            height: inherit;
            width: 50%;
            float: left;
            text-indent: 0.1rem;

        }

        .in-out {
            width: calc(100% + 20px);
            /*border: 1px solid red;*/
            position: absolute;
            top: 13%;
            height: 82%;
            overflow-y: scroll;
        }

        .in-out > li {
            height: 33%;
            position: relative;
        }

        .inout-icon {
            position: absolute;
            height: 50%;
            border-radius: 50%;
            top: 25%;
            left: 8%;
        }

        .inout-info {
            font-size: 0.05rem;
            color: #FFFFFF;
            position: absolute;
            line-height: 2;
            top: 20%;
            left: 25%;
        }

        .in-out-car .inout-icon {
            left: 5%;
        }

        .in {
            display: inline-block;
            width: 0.16rem;
            height: 0.07rem;
            border-radius: 0.035rem;
            background: #ff1d71;
            text-align: center;
            line-height: 0.075rem;
            margin-left: 0.05rem;
            /*29aae3*/
            vertical-align: middle;
        }

        .out {
            background: #29aae3;
            display: inline-block;
            width: 0.16rem;
            height: 0.07rem;
            border-radius: 0.035rem;
            text-align: center;
            line-height: 0.075rem;
            margin-left: 0.05rem;
            /*29aae3*/
            vertical-align: middle;
        }

        .in-out-car {
            width: calc(100% + 20px);
            position: absolute;
            top: 22%;
            height: 78%;
            overflow-y: scroll;
        }

        .in-out-car > li {
            height: 50%;
            position: relative;
        }

        .body-r-top {
            position: absolute;
            font-size: 0.15rem;
            top: 26%;
            left: 22%;
            color: rgb(32, 233, 255);
            text-shadow: 0 0 10px rgb(32, 233, 255);
        }

        .body-r-center {
            position: absolute;
            font-size: 0.15rem;
            top: 50%;
            left: 22%;
            color: rgb(32, 233, 255);
            line-height: 1.2;
            text-shadow: 0 0 10px rgb(32, 233, 255);
        }

        .body-r-bottom {
            position: absolute;
            top: 65%;
            width: 100%;
            bottom: 9%;
        }

        .body-r-bottom-content {
            width: 30%;
            height: 100%;
            background: url("images/carnum.png") no-repeat center;
            background-size: contain;
            float: left;
            font-size: 0.04rem;
            text-align: center;
        }

        .body-r-bottom-content > p {
            margin-top: 21%;
        }

        .body-r-bottom-content > span {
            font-size: 0.08rem;
            color: #20e9ff;
        }

        @font-face {
            font-family: "iconfont";
            src: url('font/iconfont.eot'); /* IE9*/
            src: url('font/iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/iconfont.woff') format('woff'), /* chrome, firefox */ url('font/iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('font/iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
        }

        @font-face {
            font-family: 'MyFont';
            src: url('font/7-segment.eot'); /* IE9 Compat Modes */
            src: url('font/7-segment.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('font/7-segment.woff') format('woff'), /* Modern Browsers */ url('font/7-segment.ttf') format('truetype'), /* Safari, Android, iOS */ url('font/7-segment.svg#MicrosoftYaHei') format('svg'); /* Legacy iOS */
        }

        .iconfont {
            font-family: "iconfont" !important;
            font-size: 0.13rem;
            font-style: normal;
            -webkit-font-smoothing: antialiased;
            -webkit-text-stroke-width: 0.2px;
            -moz-osx-font-smoothing: grayscale;
        }

        .body-center {
            position: relative;
        }

        .body-center  i {
            position: absolute;
            top: 0;
            left: 0;
        }
        .body-center>div {
            position: absolute;
            top: 0;
            left: 0;
            width: 0.13rem;
            height: 0.2rem;
            cursor: pointer;
        }
        .body-center  >div >div{
            color:#FFF !important;
        }
        .body-center > i:hover {
            cursor: pointer;
        }

        .body-center > div> div > p {
            font-size: 0.06rem;
        }

        .body-center > div:hover > div {
            display: block;
        }

        .car-base {
            display: none;
            background: url("images/carInfo.png") no-repeat center;
            background-size: contain;
            font-size: 0.04rem;
            padding-top: 50%;
            padding-left: 30%;
            line-height: 1.8;
        }

        .info-cars-t {
            position: absolute;
            top: -164%;
            left: -235%;
            width: 438%;
            height: 223%;

        }

        .fullClass {
            position: fixed;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 100;
            background-color: #183988
        }
    </style>
</head>
<body>
<div class="warp">
    <div class="header" style="color:#FFF;">
        <div class="header-left">2018-10-15 17:04:07 星期三</div>
        <div class="header-right"><img style="border-radius:50%;width: 0.15rem;vertical-align: middle;margin-right: 0.09rem" src="images/icon.jpg" alt=""><span>随便叫啥</span>|<a href="javascript:void(0)"
                                                                          id="js-cancelFullScreen">退出全屏</a><a
                href="javascript:void(0)" id="js-fullScreen">全屏</a></div>
    </div>
    <div class="body">
        <div class="body-ambo">
            <div class="body-ambo-s">
                <div class="visitor"><p>766999</p></div>
                <div class="visitor-staff">
                    <div style="color: #f98c20;">766999</div>
                    <div style="text-indent: 0.12rem;">13486</div>
                </div>
            </div>
            <div class="body-ambo-b">
                <ul class="in-out">
                    <li>
                        <img class="inout-icon" src="images/icon.jpg" alt="">
                        <div class="inout-info">
                            <p>张三<span class="out">出厂</span></p>
                            <p>被访部门：<span>人事部</span></p>
                        </div>
                    </li>
                    <li>
                        <img class="inout-icon" src="images/icon.jpg" alt="">
                        <div class="inout-info">
                            <p style="vertical-align: middle;">张三<span class="in">入厂</span></p>
                            <p>被访部门：<span>人事部</span></p>
                        </div>
                    </li>
                    <li>
                        <img class="inout-icon" src="images/icon.jpg" alt="">
                        <div class="inout-info">
                            <p>张三<span class="in">入厂</span></p>
                            <p>被访部门：<span>人事部</span></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="body-center" style="font-size: 0.09rem">
            <a href="javascript:void(0)" id="full">全屏</a><a href="javascript:void(0)" id="colseFull">退出全屏</a>
            <!-- <i class="icon iconfont car">&#xe601;</i>
             <i class="icon iconfont people">&#xe600;</i>-->
            <i class='icon iconfont' style='visibility:hidden'>&#xe601;</i>
        </div>
        <div class="body-ambo">
            <div class="body-ambo-b" style="height:57%;">
                <div class="body-r-top" style="font-family: 'MyFont';">
                    408
                </div>
                <div class="body-r-center" style="font-family: 'MyFont';">
                    1356
                </div>
                <div class="body-r-bottom">
                    <div class='body-r-bottom-content'>
                        <p style="color:#f46376"> 当日总入场车辆</p>
                        <span>400</span>
                    </div>
                    <div class='body-r-bottom-content'><p style="color:#f98c20"> 当前场内车辆</p>
                        <span>980</span></div>
                    <div class='body-r-bottom-content'><p style="color:#03cc86"> 当日违章车辆</p>
                        <span>32</span></div>
                </div>
            </div>
            <div class="body-ambo-s">
                <ul class="in-out-car">
                    <li>
                        <img class="inout-icon" src="images/icon.jpg" alt="">
                        <div class="inout-info">
                            <p>张三<span class="out">出厂</span></p>
                            <p>2018-10-15 17: 04 : 07<span>&nbsp;|</span> &nbsp;黄牌</p>
                        </div>
                    </li>
                    <li>
                        <img class="inout-icon" src="images/icon.jpg" alt="">
                        <div class="inout-info">
                            <p style="vertical-align: middle;">张三<span class="in">入厂</span></p>
                            <p>2018-10-15 17: 04 : 07 <span style="color:#d5d7de">|</span>&nbsp; 绿牌</p>
                        </div>
                    </li>

                </ul>
            </div>
        </div>
    </div>
    <div class="footer">
        <div class="footer-child"></div>
        <div class="footer-child"></div>
    </div>
</div>
<script src="js/jquery.min.js"></script>
<script>
    var car = [
        {type:1, name: "苏ABL4582",maxV: '0.1km/h',v: '80km/h', x: 0, y: 0, deg: 270},
        {type:2,name: "苏ABL4582", maxV: '0.1km/h', v: '80km/h', x: 85, y: 92, deg: 20},
        {type:3,name: "苏ABL4582", maxV: '0.1km/h', v: '80km/h', x: 100, y: 200, deg: 45}
        ,{type:4,name: "苏ABL4582", maxV: '0.1km/h', v: '80km/h', x: 200, y: 92, deg: 45}]
    $(function () {
        var cordonW=0
        var cordonH=0
        var html = ""

        cordonW= $(".icon").width()*2.38
        cordonH=$(".icon").height()*2.23
        for (var i = 0; i < car.length; i++) {
            if(car[i].type==1){
                html += `<div style='transform: translate(${car[i].x +cordonW}px ,${car[i].y+cordonH }px)'>
<i class='icon iconfont' style='transform:rotate(${car[i].deg}deg);color:#f67b9b '>&#xe601;</i>
<div class="car-base info-cars-t" >
                  <p>${car[i].name}</p>
                  <span>最高时速：${car[i].maxV}</span><br/>
                  <span>平均时速：${car[i].v}</span>
</div></div>`
            }else if(car[i].type==2) {


                html += `<div style='transform: translate(${car[i].x +cordonW}px ,${car[i].y+cordonH }px)'>
<i class='icon iconfont' style='color:#f67b9b '>&#xe600;</i>
<div class="car-base info-cars-t" >
                  <p>${car[i].name}</p>
                  <span>最高时速：${car[i].maxV}</span><br/>
                  <span>平均时速：${car[i].v}</span>
</div></div>`

            }else if(car[i].type==3) {
                html += `<div style='transform: translate(${car[i].x +cordonW}px ,${car[i].y+cordonH }px)'>
<i class='icon iconfont' style='color:#a1ca45 '>&#xe600;</i>
<div class="car-base info-cars-t" >
                  <p>${car[i].name}</p>
                  <span>最高时速：${car[i].maxV}</span><br/>
                  <span>平均时速：${car[i].v}</span>
</div></div>`

        }else if(car[i].type==4) {

                html += `<div style='transform: translate(${car[i].x +cordonW}px ,${car[i].y+cordonH }px)'>
<i class='icon iconfont' style='transform:rotate(${car[i].deg}deg);color:#a1ca45 '>&#xe601;</i>
<div class="car-base info-cars-t" >
                  <p>${car[i].name}</p>
                  <span>最高时速：${car[i].maxV}</span><br/>
                  <span>平均时速：${car[i].v}</span>
</div></div>`
            }
        }
        $('.body-center').append(html)
        $('#full').click(function () {
            $(this).parent().addClass('fullClass')
        })
        $('#colseFull').click(function () {
            $(this).parent().removeClass('fullClass')
        })

        $('.body-center').on('mousemove',".body-center>div",function(e){
            var mouseX=e.clientX||e.pageX
            var mouseY=e.clientY||e.pageY
            console.log(mouseX,mouseY)
            var warp_W= $('.body-center').width()
            var warp_H= $('.body-center').height()
            console.log(warp_W,warp_H)
            var warp_offy=$('.body-center').offset().top
            var warp_offx=$('.body-center').offset().left

            var X=mouseX-warp_offx
            var Y=mouseY-warp_offy
            /* cordonW= $(this).width()*4.38
             cordonH=$(this).height()*2.23*/
            //x<cordonW
            if(X<cordonW){
                if(Y<cordonH){  //左上角

                }else if(Y>warp_H-cordonH){   //左下角

                }else if(Y>cordonH&&Y<warp_H-cordonH){  //左中

                }
            }else if(X>warp_W-cordonW){
                if(Y<cordonH){   //右上角

                }else if(Y>warp_H-cordonH){  //右下角

                }else if(Y>cordonH&&Y<warp_H-cordonH){  //右中

                }
            }else if(X<warp_W-cordonW&&X>cordonW){
                if(Y<cordonH){   //上中

                }else if(Y>warp_H-cordonH){  //下中

                }else if(Y>cordonH&&Y<warp_H-cordonH){  //中中

                }
            }

        })


    })
    var $fullScreen = document.getElementById("js-fullScreen");//按钮
    if ($fullScreen) {
        $fullScreen.addEventListener("click", function () {
            var docElm = document.documentElement;
            if (docElm.requestFullscreen) {
                docElm.requestFullscreen();
            }
            else if (docElm.msRequestFullscreen) {
                docElm.msRequestFullscreen();
            }
            else if (docElm.mozRequestFullScreen) {
                docElm.mozRequestFullScreen();
            }
            else if (docElm.webkitRequestFullScreen) {
                docElm.webkitRequestFullScreen();
            }
        }, false);
    }
    var $cancelFullScreen = document.getElementById("js-cancelFullScreen");
    if ($cancelFullScreen) {
        $cancelFullScreen.addEventListener("click", function () {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
            else if (document.msExitFullscreen) {
                document.msExitFullscreen();
            }
            else if (document.mozCancelFullScreen) {
                document.mozCancelFullScreen();
            }
            else if (document.webkitCancelFullScreen) {
                document.webkitCancelFullScreen();
            }
        }, false);
    }
</script>
</body>

</html>
